<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style type="text/css">

        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        .huojia{
            width: 100%;
            height: 100%;
            border-style: solid;
            border-width: 1px;
            position: relative;
            background-color: #999999;
        }

        .huojianame{
            margin-left: -100px;
            margin-top: -10px;
            font-size: 17px;
            font-weight: bold;
        }

        .shengyu{
            font-size: 17px;
            font-weight: bold;
        }

        .ziti{
            position: absolute;
            top: 20%;
            left: 35%;
        }
        .tupian{
            width: 35px;
            position: absolute;
            left: 88%;
            top: -5%;
            float: left;
            display: none;
        }
        .xiaoxinzhuti:hover{
            cursor: pointer;
        }
        .chaoshizhuti:hover{
            cursor: pointer;

        }
        .clear:after{
            content: "";
            display: block;
            clear: both;
        }
        .flag{
            width: 100%;
            height: 60px;
            cursor:pointer;
            padding-left: 30px;
            margin-top: 30px;
            background-color: rgba(0,0,0,0.4);

        }
    </style>
</head>
<body  class="clear" style="background-image: url('/static/images/chaoshihuojia1.png');background-size: 100%;background-repeat: no-repeat">

<div class="flag">
    <button class="layui-icon liebiao1 layui-icon-cols" title="列表模式" style="font-size: 48px; color: #1E9FFF;"></button>
    <button class="icon pear-icon pear-icon-browse liebiao" title="视图模式" style="font-size: 48px; color: #1E9FFF;"></button>
</div>

<div style="position: absolute;top: 0.5%" class="zhutiqiehuan">
    <div class="xiaoxinzhuti" style="float: left;width: 80px;height: 20px;background-color: #9abcda;text-align: center">小新主题</div>
    <div class="chaoshizhuti" style="float: left;width: 80px;height: 20px;background-color: #9abcda;text-align: center;margin-left: 20px">超市主题</div>
</div>

<div class="layuimini-container huojiamohu" style="display: none">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">货架名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="storgageRackName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-primary"  lay-submit lay-filter="stogageRackFormSubmit"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                新增
            </button>
            <%--<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
                <i class="layui-icon layui-icon-delete"></i>
                删除
            </button>--%>
        </script>

        <table class="layui-hide" id="storgageRackTable" lay-filter="storgageRackTableFilter"></table>

        <script type="text/html" id="storgageRackToolbar">
            <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="update"><i
                    class="layui-icon layui-icon-edit"></i></button>
            <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delete"><i
                    class="layui-icon layui-icon-delete"></i></button>
        </script>

    </div>

</div>


<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<script>
    layui.use(['form','table','jquery'],function (){
        var $ = layui.jquery;
        var from = layui.form;
        var table = layui.table;
        var form = layui.form;
        $(".xiaoxinzhuti").click(function () {
        //切换小新主题
            $(".tupian").show();
            $("body").css("background-image","url('/static/images/xiaoxinbizhi.jpg')")
            $(".huojia").css("background-color","#9abcda")
        })
        $(".chaoshizhuti").click(function () {
        //切换超市主题
            $(".tupian").hide();
            $("body").css("background-image","url('/static/images/chaoshihuojia1.png')");
            $(".huojia").css("background-color"," #999999")
        });

        $(function (){
            var storgageRacksList = ${storgageRacksList};
            for (let i =0;i<storgageRacksList.length;i++){
               //获取总量
                var goorssCapacity = storgageRacksList[i].goorssCapacity;
                //获取已用量
                var residualCapacity = storgageRacksList[i].residualCapacity;
                //计算百分比
                var total = parseInt(residualCapacity/goorssCapacity*100);
                var storgageRack = "<div style=\"width:300px;height: 80px;margin-left: 50px;float: left;margin-top: 30px\">\n" +
                    "    <!--图形-->\n" +
                    "    <div class=\"huojia\">\n" +
                    "        <!--透明背景-->\n" +
                    "        <div style=\"width:"+total+"%"+" ;height: 100%;background-color: rgba(0,0,0,0.3);\"></div>\n" +
                    "        <div class=\"ziti clear\">\n" +
                    "<input type='hidden' class='sotrgageRackId'value='"+storgageRacksList[i].storgageRackId+"' >"+
                    "            <div class=\"huojianame\">\n" +
                    "                "+storgageRacksList[i].storgageRackName+"\n" +
                    "            </div>\n" +
                    "            <div class=\"shengyu\">\n" +
                    "                已用容量:"+total+"%"+"\n" +
                    "            </div>\n" +
                    "        </div>\n" +
                    "        <img src=\"static/images/xiaoxin.png\" class=\"tupian\">\n" +
                    "    </div>\n" +
                    "</div>";
                    $("body").append(storgageRack);

            }
            //货架图形单击事件,展示货架下的商品
            $(".huojia").bind("click",function (){
              //获取货架编号
                $(this).find(".sotrgageRackId").val();
              //打开一个页面展示货架下的商品信息
                layer.open({
                    //执行修改用户操作
                    title: '添加用户信息',
                    type: 2,
                    shade: 0.1,
                    area: ['100%', '100%'],
                    content: '/storgageRack/skipStorgageGoods?storgageRack='+ $(this).find(".sotrgageRackId").val()
                })
            })
        })


        //列表切换事件
        $(".liebiao1").click(function (){
          //清空body
            $("body").find(".zhutiqiehuan,.huojia").hide();
            $("body").css("background-image","");
            //切换模式的背景颜色
            $(".flag").css("background-color","#FFFFFF");
            $(".huojiamohu").css("margin-top","10px");
            //显示模糊查询框
            $(".huojiamohu").show();
            //对表格进行渲染
            table.render({
                //指定渲染的表格
                elem:"#storgageRackTable",
                //指定数据获取路径
                url:'storgageRack/selectStorgageRack',
                toolbar:'#toolbarDemo',
                //规定请求方式
                method:'post',
                //开启分页
                page:true,
                check:true,
                limits:[1,5,10],
                even:true,
                cols:[[
                    {field:'storgageRackId',title:'货架编号',  align: 'center'},
                    {field:'storgageRackName',title:'货架名称',  align: 'center'},
                    {field:'goorssCapacity',title:'货架总容量',  align: 'center'},
                    {field:'residualCapacity',title:'已用容量',  align: 'center'},
                    {field:'createTime',title:'创建时间',  align: 'center'},
                    {title: '操作',align: 'center',toolbar:'#storgageRackToolbar'}
                ]]
            })
        })








        //切换视图事件
        $(".liebiao").click(function (){
            //显示图形
            $("body").find(".zhutiqiehuan,.huojia").show();
            //隐藏模糊
            $(".huojiamohu").hide();
            $("body").css("background-image","url('/static/images/chaoshihuojia1.png')");
            //切换模式的背景颜色
            $(".flag").css("background-color","rgba(0,0,0,0.3)");
            $(".huojiamohu").css("margin-top","");
        });


        //表格事件
        table.on("toolbar(storgageRackTableFilter)",function(obj){
          if (obj.event==='add'){
              //执行货架的添加操作
              layer.open({
                  //执行修改用户操作
                  title: '添加货架信息',
                  type: 2,
                  shade: 0.1,
                  area: ['32%', '28%'],
                  content: 'storgageRack/skipStorgageRackAdd'
              })
          }
        })

        //表格事件
        table.on("tool(storgageRackTableFilter)",function (obj){
            if (obj.event==='update'){
                //修改货架信息
                layer.open({
                    //执行修改用户操作
                    title: '修改货架信息',
                    type: 2,
                    shade: 0.1,
                    area: ['32%', '32%'],
                    content: 'storgageRack/skipStorgageRackUpdate?storgageRackId='+obj.data.storgageRackId
                })
            }else{
                //执行删除
                //执行删除
                layer.confirm('真的要删除吗？',function(index){

                    $.post('storgageRack/deleteStogageRack',{"storgageRackId":obj.data.storgageRackId},function(result){
                        if (result.success) {
                            layer.msg(result.msg,{
                                icon: 1,
                                time: 1000
                            }, function() {
                               location.reload(); // 父页面刷新
                                layui.table.reload("storgageRackTable");
                            });
                        }
                    });

                })
            }
        })



        //form表单事件
        form.on("submit(stogageRackFormSubmit)",function (data){
            //执行搜索重载
            table.reload('storgageRackTable',{
                //默认第几页
                page:{
                    curr:1
                },
                where:{
                    //添加请求参数
                    storgageRackName:data.field.storgageRackName
                }
            })
        })

    })
</script>
</body>

</html>